<template>
  <page-header-wrapper>
    <a-card>
      <div class="flex justify-between mb-4">
        <span></span>
        <addRole @update="$store.dispatch('GetRoleList')" v-action:add />
      </div>
      <a-table rowKey="id" :columns="columns" :data-source="roleList">
        <span slot="opr" slot-scope="_, record">
          <editRole :record="record" v-action:update />
          <!-- <a-divider type="vertical" /> -->
          <a-popconfirm title="确认删除吗?" @confirm="() => onDelete(record)">
            <a href="javascript:;" v-action:delete>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { deleteRole } from '@/api/common'
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '角色',
    key: 'roleName',
    dataIndex: 'roleName'
  },
  {
    title: '描述',
    key: 'description',
    dataIndex: 'description'
  }
  // {
  //   title: '操作',
  //   key: 'opr',
  //   dataIndex: 'opr',
  //   scopedSlots: { customRender: 'opr' }
  // }
]
export default {
  name: 'role',
  data() {
    return {
      data: []
    }
  },
  computed: {
    roleList() {
      return this.$store.getters.roleList
    },
    columns() {
      if (this.$auth('role.update') || this.$auth('role.delete')) {
        return [
          ...columns,
          {
            title: '操作',
            key: 'opr',
            dataIndex: 'opr',
            scopedSlots: { customRender: 'opr' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  components: {
    addRole: () => import('./addRole.vue'),
    editRole: () => import('./editRole.vue')
  },
  methods: {
    async onDelete({ id }) {
      await deleteRole(id)
      this.$message.info('已删除')
      this.$store.dispatch('GetRoleList')
    }
  }
}
</script>
<style lang="css" scoped>
.box {
  width: 250px;
  height: 300px;
  border: 1px solid gray;
  margin-top: 15px;
}
.size {
  font-size: 120px;
  color: gray;
  margin-bottom: 15px;
}
.center {
  width: 160px;
  height: 160px;
  text-align: center;
  margin: 70px auto;
}
</style>
